<template>
    <div>
        <transition name="left_slide">
            <div class="left" v-show="$parent.showPage">
                <div class="card1 card_bg_c xbmt_box">
                    <h2>南京西坝码头</h2>
                    <div class="card1-content">
                        <div>
                            <div>
                                <img src="~@static/img/360Camera.png" alt="">
                                <span>高空全景</span>
                            </div>
                            <img src="~@static/img/高空全景.png" alt=""> 
                        </div>
                        <div>
                            <div>地址：<span class="blue">{{ titleFrom.address }}</span></div> 
                            <div>码头总体定位：<span class="blue">{{ titleFrom.dockOverallPositioning }}</span></div> 
                            <div>岸线总长度：<span class="blue">{{ titleFrom.totalShorelineLength }}</span></div> 
                            <div>年生产力：<span class="blue">{{ titleFrom.annualProductivity }}</span></div> 
                        </div>
                        
                    </div>
                </div>
                <div class="card2 card gkmtgk_box">
                    <div class="card_title"><i></i>港口码头概况</div>
                    <div>
                        <div class="qygk_center">概况</div>
                        <div class="card_group">
                            <div class="card_item" v-for="(item,index) in qygkList" :key="index">
                                <img :src="item.img" alt="">
                                <div class="item_text">
                                    <div>{{ item.name }}</div>
                                    <div><span class="blue">{{ item.number }}</span>{{ item.unit }}<span class="blue">{{ item.val }}</span>{{ item.unit2|| ""  }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </transition>
    
        <transition name="right_slide">
            <div class="right" v-show="$parent.showPage"> 
                <div class="card card3">
                    <div class="card_title"><i></i>设备概况</div> 
                    <div class="dbfg_top dbfg_top_left">
                        <div>
                            <div>总个数：<span>{{equipFrom.equipTotalCount}}</span>个</div> 
                            <div>离线个数：<span>{{equipFrom.standbyEquipTotalCount}}</span>个</div> 
                        </div>
                        <div>
                            <div>在线个数：<span>{{ equipFrom.onlineEquipCount }}</span>个</div> 
                            <div>故障个数：<span>{{ equipFrom.breakdownEquipTotalCount }}</span>个</div> 
                        </div>
                    </div>
                    <div class="dbfg_center">
                        <span>占比统计</span>
                        <span class="line_left"></span>
                    </div> 
                    <div id="gtbg"></div> 
                </div> 
                <div class="card2_r card">
                    <div class="card_title"><i></i>堆场存量概况<i class="more_icon"></i></div>  
                    <div class="card2_r_body" id="dbclgk"></div>
                </div>
                <div class="card card3_r">
                    <div class="card_title"><i></i>靠泊船舶概况<i class="more_icon"></i></div>
                    <div class="dbfg_top trgk">
                        <div>
                            <div>全年</div>
                            <div><span>{{ cumulativeDockedCountYearly }}</span>艘</div>
                        </div>
                        <!-- <div>
                            <div>含水量、有机质、土壤类型、厚度、酸碱度</div>
                            <span>N、P、K、S</span>
                        </div> -->
                    </div> 
                    <div class="dbfg_center">
                        <span>统计</span>
                        <span class="line_right"></span>
                    </div>
                    <div id="trqk"></div>
                </div>
            </div>
        </transition>
        <!-- <div class="layer_cell"> 
            <img src="~@static/img/矢量底图.png"  @click="clickLegend('矢量底图')" alt="">
            <img src="~@static/img/影像底图.png"  @click="clickLegend('影像底图')" alt="">
        </div> -->


        <div class="stack_dialog" v-show="stackDialogVisible">
            <div class="dialog_title">
                <div><i class="point"></i>堆垛--详情信息卡</div>
                <i class="el-icon-close" @click="stackDialogVisible = false"></i>
            </div>
            <div class="dialog_body">
                <div class="dialog_tag">
                    <span>堆场名</span>
                    <span>{{ stackFrom.stackName }}</span>
                </div>  
                <el-descriptions direction="vertical" :column="3" >
                    <el-descriptions-item :label="item.label" :span="item.span ? item.span : 1" v-for="item in stackConfig" :key="item.value">{{ stackFrom[item.value] ? stackFrom[item.value] : "--" }}</el-descriptions-item> 
                </el-descriptions>
            </div>
        </div>
        <div class="job_dialog" v-show="jobDialogVisible">
            <div class="dialog_title">
                <div><i class="point"></i>作业--详情信息卡</div>
                <i class="el-icon-close" @click="jobDialogVisible = false"></i>
            </div>
            <div class="dialog_body">
                <div class="dialog_tag">
                    <span>作业票号</span>
                    <span>{{ jobFrom.workTicketCode }}</span>
                </div>  
                <el-descriptions direction="vertical"  :column="6" class="job_descriptions">
                    <el-descriptions-item :span="item.span ? item.span : 1" :label="item.label" v-for="item in jobConfig" :key="item.value">{{ jobFrom[item.value] ? jobFrom[item.value] : "--" }}</el-descriptions-item> 
                </el-descriptions>
            </div>
        </div>
    
    </div>
</template>

<script> 
import { jobData } from "@/assets/js/jobData.js"
export default { 
    data() {
        return {
            jobData,
            titleFrom: {},
            qygkList: [
                {img: require("../../static/img/总面积.png"), data: "landAreaStorage", name: "陆域堆场面积", number: "60899",unit: "m²"},
                {img: require("../../static/img/自然保护区.png"), data: "cargoThroughput", name: "吞吐量", number: "29209",unit: "万吨"},
                {img: require("../../static/img/植被.png"), data: "totalStackYardQuantity", name: "堆场总存量", number: "20", unit: "万吨"},
                {img: require("../../static/img/非自然保护区.png"), data: "monitoringQuantity", name: "监控数量", number: "500", unit: "个"},
                {img: require("../../static/img/非植被.png"), data: "berthQuantity", name: "泊位数量", number: "60", unit: "个"},
                {img: require("../../static/img/人为活动区.png"), data: "shipQuantity", name: "船舶数量", number: "1500", unit: "艘"},
            ],
            options: [
                { value: "2022", label: "2022年" },
                { value: "2023", label: "2023年" }
            ],
            value: "2022年",
            headers: {
                "sign": "d04153093d0f05fad6e4d5dc5c05487bd8f5039d6fe553482d601845345deda7",
                "x-access-token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MjcxMzgzNTEsInVzZXJuYW1lIjoiYWRtaW4ifQ.zqpjhBwlBYYLzGC9wcmElKRHJGE4SaKWHC-vNqZhafg"
            },
            equipFrom: {},
            cumulativeDockedCountYearly: "",
            stackConfig: [
                { label: "船名", value: "shipName" },
                { label: "航次", value: "voyageNumber" },
                { label: "舱口", value: "hatchway" },
                { label: "货主", value: "cargoOwnerName" }, 
                { label: "初始吨方", value: "initialTonSquare" },
                { label: "堆场ID", value: "stackId" },
                { label: "类型", value: "isTarpaulinCovered" },
                { label: "堆垛长度", value: "stackLength" },
                { label: "堆垛宽度", value: "stackWidth" },
                { label: "x轴位置", value: "xAxisPosition" },
                { label: "y轴位置", value: "yAxisPosition",span: 2  },
                // { label: "历史堆名", value: "stackHistoryName",span: 3 },
            ],
            stackFrom: {
                shipName: "神华999",
                voyageNumber: "0",
                hatchway: "不分舱",
                cargoOwnerName: "中盐",
                initialTonSquare: "10000",
                stackId: "4",
                isTarpaulinCovered: "自然煤",
                stackLength: "35",
                stackWidth: "50",
                xAxisPosition: "250",
                yAxisPosition: "280", 
            },
            stackDialogVisible: false,
            jobDialogVisible: false,
            jobConfig: [ 
                // { label: "班次", value: "shift" },
                { label: "船名", value: "shipName", span: 2  },
                { label: "航次", value: "voyageNumber", span: 2  },
                { label: "车船信息", value: "shipInfo", span: 2  },
                { label: "作业类别", value: "worKPlanType", span: 2  },
                { label: "作业流程编码", value: "workProcessCode", span: 2  },
                { label: "货物名称", value: "cargoTypeName", span: 2  },
                { label: "计划吨位", value: "plannedWorkload", span: 2  },
                { label: "泊位名称", value: "preBerthName", span: 2  },
                { label: "船舶长度", value: "shipLength", span: 2 },
                { label: "作业计划日期", value: "workPlanTime", span: 3 },
                { label: "靠泊时间", value: "berthTime", span: 3 },
                { label: "预离时间", value: "preDepartureTime",span: 3},
                { label: "开工时间", value: "workStartTime", span: 3 },
                { label: "堆场名称", value: "stackYardName",span: 3  },
                { label: "货主名称", value: "cargoOwnerName", span: 3  }, 
                { label: "作业流程内容", value: "workProcessContent",span: 6 },
                { label: "场地要求", value: "siteRequirement",span: 6  },
                { label: "作业要求", value: "workRequirement",span: 6 },

                // { label: "船名", value: "shipName" },
                // { label: "航次", value: "voyageNumber" },
                // { label: "车船信息", value: "shipInfo" },
                // { label: "作业类别", value: "worKPlanType" },
                // { label: "作业流程编码", value: "workProcessCode" },
                // { label: "货物名称", value: "cargoTypeName" },
                // { label: "计划吨位", value: "plannedWorkload" },
                // { label: "泊位名称", value: "preBerthName" },
                // { label: "船舶长度", value: "shipLength"},
                // { label: "作业计划日期", value: "workPlanTime", span: 1 },
                // { label: "靠泊时间", value: "berthTime", span: 2 },
                // { label: "预离时间", value: "preDepartureTime",span: 1},
                // { label: "开工时间", value: "workStartTime", span: 2 },
                // { label: "堆场名称", value: "stackYardName",span: 1  },
                // { label: "货主名称", value: "cargoOwnerName", span: 2  }, 
                // { label: "作业流程内容", value: "workProcessContent",span: 3 },
                // { label: "场地要求", value: "siteRequirement",span: 3  },
                // { label: "作业要求", value: "workRequirement",span: 3 },


                // { label: "堆场Id", value: "stackYardId" },
                // { label: "贸易类型", value: "tradeType" },
                // { label: "泊位Id", value: "preBerthId" },
                // { label: "船代名称", value: "shipAgentName" },
                // { label: "作业流程id集合", value: "workPlanProcessId" },
                // { label: "计划作业效率", value: "plannedWorkEfficiency" },
                // { label: "分值", value: "score" },
                // { label: "大机/作业人员", value: "equipOperatorName" },
                // { label: "核算量", value: "calculatedAmount" },
                // { label: "台账", value: "register" },
                // { label: "得分", value: "goal" },
                // { label: "预靠时间", value: "preBerthTime",span: 3  },
                // { label: "作业计划方式", value: "workPlanMode",span: 3  },
            ],
            jobFrom: { 
                workTicketCode: "J-2099-10-01-01", 
                workPlanTime: "2099/10/1",
                shift: "白班",
                shipName: "神华999",
                voyageNumber: "0000",
                shipInfo: "进场",
                plannedWorkload: "10000",
                worKPlanType: "卸船",
                cargoTypeName: "煤炭",
                workPlanMode: "测试",
                tradeType: "内贸",
                preBerthName: "1#卸船泊位",
                shipLength: "200",
                shipAgentName: "五矿",
                cargoOwnerName: "中盐",
                workProcessCode: "A1",
                workProcessContent: "卸船机(1#-4#卸船机)→101A→102A→100A→1#斗轮机",
                preBerthTime: "1999/1/1 0:00",
                preDepartureTime: "2099/12/31 0:00",
                stackYardName: "202#堆场",
                siteRequirement: "测试",
                workRequirement: "测试",
                berthTime: "1999/1/1 0:00",
                workStartTime: "1999/1/2 0:00",
            }
        }
        
    },
    mounted() { 
        
        this.$nextTick(()=>{
            this.initChart();
        })
        this.getTitleFrom();
        this.portQuay();
        this.$bus.$on("get-JobDetail",(res)=>{
            this.getJobDetail(res);
        });
        this.$bus.$on("get-stackDetail",(res)=>{
            this.getStackDetail(res);
        }); 
    },
    methods: {
        async getStackDetail(response){   
            let _this = this; 
            
            let InterfaceMode = JSON.parse(response.split(",")[1]);  
            var stackId = response.split(",")[3];    
            // console.log(InterfaceMode,typeof(InterfaceMode),response);
            
            if(InterfaceMode){ 
                let result = await _this.getStackDetailData();    
                if(result.length !== 0){
                    result.forEach(item => {   
                        item.stackList.forEach(i => {
                            if(i.id == stackId){
                                _this.stackFrom = i;
                                _this.stackFrom.stackName = response.split(",")[4];
                                _this.stackDialogVisible = true; 
                            }
                        }); 
                    });
                }
            }else{
                _this.stackFrom = {
                    shipName: "神华999",
                    voyageNumber: "0",
                    hatchway: "不分舱",
                    cargoOwnerName: "中盐",
                    initialTonSquare: "10000",
                    stackId: "4",
                    isTarpaulinCovered: "自然煤",
                    stackLength: "35",
                    stackWidth: "50",
                    xAxisPosition: "250",
                    yAxisPosition: "280", 
                }
                _this.stackFrom.stackName = response.split(",")[4];
                _this.stackDialogVisible = true; 
            }
            
        },
        async getJobDetail(response){
            let _this = this; 
            let InterfaceMode = JSON.parse(response.split(",")[1]);  
            var jobId = response.split(",")[3];     

            //console.log(response,"kkokokokokok");
            
            
            if(InterfaceMode){
                let result = await _this.getDetailData(); 
                if(result.length !== 0){
                    result.forEach(item => {  
                        if(item.workProcessId + item.workInfo.workTicketCode == jobId){
                            _this.jobFrom = item.workInfo;
                            _this.jobFrom.berthTime = item.berthTime;
                            _this.jobFrom.workStartTime = item.workStartTime; 
                            _this.jobDialogVisible = true;
                        }
                    });
                }
            }else{ 
                
                _this.jobData.forEach(item => {   
                    
                    if( jobId == item.workTicketCode){
                        _this.jobFrom = item;
                        _this.jobDialogVisible = true;
                    }
                }); 
            }
            
        },
        async getStackDetailData(){
            let _this = this;
            let url = `${_this.$sysConfig.StackUrl}/digital/twin/stack_info`;
            let headers = {
                "sign": "d04153093d0f05fad6e4d5dc5c05487bd8f5039d6fe553482d601845345deda7"
            };  
            try {
                let res = await _this.$axios.get(url, { headers });
                return res.data.result;
            } catch (error) {
                console.error("Error fetching task detail info:", error);
                throw error; 
            }
        },
        async getDetailData(){
            let _this = this;
            let url = `${_this.$sysConfig.StackUrl}/digital/twin/task_detail_info`;
            let headers = {
                "x-access-token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3Mjc2NjA1MzksInVzZXJuYW1lIjoiYWRtaW4ifQ.x6uu-h8C_d_nnaWgF9VQjBRMmrSI6k-nboBG26MKCOk"
            };  
            try {
                let res = await _this.$axios.get(url, { headers });
                return res.data.result;
            } catch (error) {
                console.error("Error fetching task detail info:", error);
                throw error; 
            }
        },
        getDockedShip(){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/docked_ship`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{   
                let result = res.data.result;  
                _this.cumulativeDockedCountYearly = result.cumulativeDockedCountYearly;
                _this.initBar(result.xAxis,result.YAxis);
            })
        },
        getEquipSituation(pie1Size){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/equip_situation`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{   
                let result = res.data.result;  
                _this.equipFrom = result; 
                _this.initPie(result.bigMachineInfoList,"gtbg",pie1Size); 
            })
        },
        getStackYardTonnage(pie2Size){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/stack_yard_tonnage`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{   
                let result = res.data.result;
                _this.initpie2(pie2Size,result);
            })
        },
        portQuay(){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/port_quay`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{  
                let result = res.data.result;
                _this.qygkList.forEach( item => {
                    for(let key in result){
                        if(key === item.data){
                            item.number = result[key];
                        }
                    } 
                } )
            });
        },
        getTitleFrom(){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/title`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{ 
                _this.titleFrom = res.data.result;
            })
        },

        getNowSize(val,initWidth=1920){
            let nowClientWidth = window.innerWidth;
            return val * (nowClientWidth/initWidth);
        },
        initChart(){
            let _this = this;  
            const screenWidth = window.innerWidth;
            // console.log(screenWidth,"screenWidthscreenWidthscreenWidth");
            var pie1Size;
            var pie2Size; 
            if(screenWidth < 1921 ){
                pie1Size = { 
                    radius: [50, 68],
                    center: ["26%", "50%"],
                    legendSize: {
                        itemHeight: 8,
                        itemWidth: 10,
                    }
                }
                pie2Size = {
                    roundSize: {
                        radius: [61, 73],
                        center: ["24%", "50%"],
                    },
                    titleSize: { 
                        top: "36%",
                        left: "23.3%",
                    },
                    imgSize: { 
                        width: 110,
                        height: 110
                    },
                    imgPosition: {
                        left: '10.6%',
                        top:  'center',
                        position: [100, 100]
                    },
                    legendSize: { 
                        itemWidth: 12,
                        itemHeight: 12,  
                    },
                }
                
            }else if(screenWidth > 1921 &&  screenWidth < 2563 ){ 
                pie1Size = { 
                    radius: [60, 88],
                    center: ["26%", "50%"],
                    legendSize: {
                        itemHeight: 10,
                        itemWidth: 14,
                    } 
                }
                pie2Size = {
                    roundSize: {
                        radius: [90, 108],
                        center: ["26%", "50%"],
                    },
                    titleSize: { 
                        top: "38%",
                        left: "26.3%",
                    },
                    imgSize: { 
                        width: 150,
                        height: 150
                    },
                    imgPosition: {
                        left: '10%',
                        top:  'center',
                        position: [100, 100]
                    },
                    legendSize: { 
                        itemWidth: 16,
                        itemHeight: 16,  
                    },
                }
            }else if(screenWidth > 2563 &&  screenWidth < 3841 ){
                pie1Size = { 
                    radius: [110, 148],
                    center: ["28%", "50%"],
                    legendSize: {
                        itemHeight: 16,
                        itemWidth: 22,
                    } 
                }
                pie2Size = {
                    roundSize: {
                        radius: [130, 158],
                        center: ["26.8%", "50%"]
                    },
                    titleSize: { 
                        top: "39%",
                        left: "26.3%",
                    },
                    imgSize: { 
                        width: 220,
                        height: 220
                    },
                    imgPosition: {
                        left: '13.6%',
                        top:  'center',
                        position: [100, 100]
                    },
                    legendSize: { 
                        itemWidth: 20,
                        itemHeight: 20,  
                    },
                }
            } 
            _this.getStackYardTonnage(pie2Size);
            _this.getEquipSituation(pie1Size); 
            _this.getDockedShip();

        }, 
        initPie(dataList,id,pieSize){
            let _this = this;
            var chartDom = document.getElementById(id);
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            let color = ['#4DDAE2', '#0B7AE1', '#9F7AEA', '#48BB78', '#87BDFF'];
            var data = [];
            var legenddata = [];
            for (var i = 0; i < dataList.length; i++) {
                data.push({
                    value: dataList[i].count,
                    val: dataList[i].percentage,
                    name: dataList[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 0,
                            // shadowBlur: 0,
                            // borderColor: color[i],
                            // shadowColor: color[i]
                        }
                    }
                });
                legenddata.push(dataList[i].name);
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: pieSize.radius, 
                center: pieSize.center,
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false, 
                        }, 
                    }
                },
                data: data
            }];
            var option = { 
                color: color,   
                tooltip: {
                    show: false
                },
                legend: { 
                    type: 'scroll',
                    ...pieSize.legendSize,
                    orient: 'vertical', 
                    pageIconColor: '#fff', 
                    pageTextStyle: {
                        color: '#fff',
                        fontSize: _this.getNowSize(14),
                    },
                    pageIconSize: _this.getNowSize(11), 
                    x: 'right',
                    y: "center",
                    // data: ['林地', '园地', '耕地', '水   ', '草地', '湿地', '其他'],
                    data: legenddata,
                    bottom: 150,
                    align: 'left',
                    textStyle: {
                        color: "#fff", 
                        "fontSize": _this.getNowSize(16)
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        var target; 
                        var value; 
                        for (var i = 0, l = data.length; i < l; i++) { 
                            if (data[i].name == params) {
                                target = data[i].val;  
                                value = data[i].value;   
                            }
                        } 
                        var arr = [params+'  ' + value  +'   '+ target + ' ' +""];
                        return arr.join("\n");
                        
                    }
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            chart.setOption(option);
        },
        initBar(xAxis,YAxis){
            let _this = this;
            var chartDom = document.getElementById("trqk");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            var option = { 
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0,0,0,0.3)",
                    borderWidth: "0",
                    textStyle: {
                        color: "#fff" //设置文字颜色
                    },
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    formatter: function(prams) {  
                        return prams[0].axisValue + ":" + " " + prams[0].data + "%" 
                    }
            },
                grid: {
                    top: '15%',
                    right: '3%',
                    left: '13%',
                    bottom: '16%'
                },
                xAxis: [{
                    type: 'category',
                    color: '#59588D',
                    data: xAxis,
                    axisPointer: {
                        type: 'line'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#272456'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#B4B6BB',
                        textStyle: {
                            fontSize: _this.getNowSize(14),
                        },
                    },
                }],
                yAxis: [{ 
                    axisLabel: {
                        // formatter: '{value}%',
                        color: '#8E9299',
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#515762'
                        }
                    }
                }],
                series: [{
                    type: 'bar',  
                    data: YAxis,
                    barWidth: _this.getNowSize(20),
                    itemStyle: {
                        normal: {
                            color: "#04BCBF" 
                        }
                    }, 
                }]
            };
            chart.setOption(option);
        },
        initpie2(size,result){
            let _this = this;
            var chartDom = document.getElementById("dbclgk");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            let img = "../../static/img/雷达图.png";  

            var trafficWay = result.stackYardList;
            let legendData = [];

            var data = [];
            var color=['#31DCC9','#FFBB58','#87BDFF','#81E844','#008EFF']
            for (var i = 0; i < trafficWay.length; i++) {
                legendData.push(trafficWay[i].stackYardName);
                data.push({
                    value: trafficWay[i].stackYarTotalTonnage,
                    name: trafficWay[i].stackYardName,
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            shadowBlur: 0,
                            borderRadius:20,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 2,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
            }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                ...size["roundSize"],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        }, 
                    }
                },
                data: data
            }];
            var option = { 
                color : color,
                title: {
                    text: '存量统计',
                    subtext: result.stackTotalTonnage,
                    textAlign: "center",
                    ...size["titleSize"],
                    textStyle: {
                        color: '#CFDFFC',
                        fontSize: _this.getNowSize(16),
                    },
                    subtextStyle: {
                        color: '#2FE1FF',
                        fontSize: _this.getNowSize(16),
                        fontWeight: '600'
                    }
                },
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            ...size["imgSize"],
                        }, 
                        ...size["imgPosition"],
                    }]
                },
                tooltip: {
                    show: false
                },
                legend: { 
                    type: 'scroll',
                    orient: 'vertical',
                    pageIconColor: '#fff', 
                    pageTextStyle: {
                        color: '#fff',
                        fontSize: _this.getNowSize(14),
                    },
                    pageIconSize: _this.getNowSize(11), 
                    top: "center",
                    right: "2%",
                    ...size["legendSize"],
                    itemGap: 14,
                    textStyle: {
                        color: "#fff",
                        fontSize: _this.getNowSize(16),
                        rich:{
                            a:{
                                color: "#2FE1FF",
                                fontSize: _this.getNowSize(16),
                            }
                        }, 
                    }, 
                    data: legendData,
                    formatter: function (params) {
                        var target; 
                        var value; 
                        for (var i = 0, l = data.length; i < l; i++) { 
                            if (data[i].name == params) {
                                target = data[i].val;  
                                value = data[i].value;   
                            }
                        } 
                        var arr = [params+'  ' + '{a|' + value + '}' + ' '];
                        return arr.join("\n");
                        
                    }
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            } 
            chart.setOption(option);
        },
        clickLegend(data){  
        }
    },
    watch: {
        stackDialogVisible(newVal,oldVal){
            if(newVal){
                this.jobDialogVisible = false;
            }
        },
        jobDialogVisible(newVal,oldVal){
            if(newVal){
                this.stackDialogVisible = false;
            }
        }
    },
    beforeDestroy() {  
        this.stackDialogVisible = false;
        this.jobDialogVisible = false; 
    }
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss"; 
.job_descriptions{
    max-height: 70vh;
    overflow-y: auto;
}
.el-descriptions{
    margin-top: 1.4vh;
    /deep/ .el-descriptions__body{
        background-color: transparent !important;
    }
    /deep/ &:not(.is-bordered) .el-descriptions-item__cell {
        padding-bottom: 0.8vh !important;
    }
    /deep/ .el-descriptions-item__label {
        color: #94A0B7 !important;
        font-size: 0.76vw !important;
    }
    /deep/ .el-descriptions-item__content {
        color: #F0F1F5 !important;
        font-size: 0.7vw !important;
    }
}
.dialog_tag{
    width: 100%;
    height: 2.8vh;
    background-color: #069B9F;
    color: #fff;
    font-size: 0.8vw;
    >span:nth-child(1){
        background-color: #0F3741;
        color: #00FFFF;
        display: inline-block;
        padding: 0 0.4vw;
        height: 100%; 
        line-height: 2.8vh;
        margin-right: 0.4vw;
    }
}

.dialog_body{
    width: 100%;
    padding: 0 1rem 1rem;
    box-sizing: border-box; 
    height: calc(100% - 30px);
}
.dialog_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.6vh 1vw 1vh 1vw;
    color: #fff;
    >div{
        font-size: 0.9vw;
    }
    .el-icon-close{
        font-size: 0.9vw;
        font-weight: bold;
        cursor: pointer;
    }
}
.point{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #00FFFF;
    border-radius: 50%;
    margin-right: 0.6vw;
}

.job_dialog{
    position: absolute;
    top: 2%;
    right: 26%;
    background: url("~@static/img/作业详情.png") no-repeat center center/100% 100%; 
    width: 21vw;
    z-index: 60;
}
.stack_dialog{
    position: absolute;
    top: 16%;
    left: 26%;
    background: url("~@static/img/堆垛详情.png") no-repeat center center/100% 100%; 
    width: 20vw;
    z-index: 60;
}
.card_bg_c{
    background: url("~@static/img/card_bg_c.png") no-repeat center center/100% 100% !important;
}
.gkmtgk_box{
    height: 24vh;
    >div:nth-child(2){
        height: calc(100% - 4vh) !important; 
    }
}
.xbmt_box{
    height: calc(100% - 28vh);
} 
.card1-content{
    >div:nth-child(2){
        padding-right: unset !important;
    }
}
</style>